<template>
  <div class="organization-selector">
    <el-dialog
      :visible.sync="orgVisible"
      title="选择组织"
      :before-close="_handleCancelClick"
      width="574px"
    >
      <el-input v-model="keyword" placeholder="输入关键字搜索" @input="_handleOrgSearch" />
      <el-tree
        ref="tree"
        v-loading="loading"
        :data="orgTree"
        :props="props"
        :node-key="props.nodeKey"
        :expand-on-click-node="false"
        :show-checkbox="isMultiSelect"
        default-expand-all
        @check="_handleCheck"
        @node-click="_handleNodeClick"
      />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="_handleSubClick">确定</el-button>
        <el-button size="small" @click="_handleCancelClick">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    // apiFindOrgPageByParam,
    findOrgList
  } from './api'
  import { MAX_INTEGER } from '../../consts'
  import { tree } from '../../utils/tree'

  export default {
    name: 'OrgSelector',
    props: {
      orgVisible: { type: Boolean, default: false },
      lazy: { type: Boolean, default: false },
      // checkbox 多选, radio 单选
      isMultiSelect: { type: Boolean, require: false, default: true }
    },
    data() {
      return {
        loading: false,
        keyword: '',
        isShowDialog: false,
        pageNo: 1,
        pageSize: MAX_INTEGER,
        total: -1,
        orgTree: [],
        // 选中的节点信息
        checkedOrgList: []
      }
    },
    computed: {
      props() {
        return {
          label: 'name',
          nodeKey: 'id'
        }
      }
    },
    created() {
      this._initData()
    },
    methods: {
      _initData() {
        this._getOrgList()
      },
      async _getOrgList() {
        this.loading = true
        const records = await findOrgList()
        this.orgTree = tree(records)
        this.loading = false
      },
      async _handleOrgSearch() {
        this.loading = true
        const records = await findOrgList(this.keyword)
        this.orgTree = tree(records)
        this.loading = false
      },
      // async _getOrgList(pageNo, pageSize) {
      //   const { total, records } = await apiFindOrgPageByParam({
      //     pageNo,
      //     pageSize
      //   })
      //   this.total = total
      //   this.orgTree = tree(records)
      // },
      _handleCheck(data) {
        if (!this.isMultiSelect) {
          this._radioMethod(data)
        } else {
          this._checkboxMethod()
        }
      },
      _handleNodeClick(data) {
        if (!this.isMultiSelect) {
          this._handleCheck(data)
        }
      },
      _radioMethod(data) {
        const nodeKey = this.props.nodeKey
        if (
          this.checkedOrgList.findIndex(org => org[nodeKey] === data[nodeKey]) >=
          0
        ) {
          this.checkedOrgList = []
        } else {
          this.checkedOrgList = [data]
        }
        this.setCheckedByNodeKeys(this.checkedOrgList.map(org => org[nodeKey]))
        this.$emit('check', this.checkedOrgList)
      },
      // 点击提交按钮
      _handleSubClick() {
        this.$emit('confirmClick', this.checkedOrgList)
      },
      // 点击取消按钮
      _handleCancelClick() {
        this.$emit('cancelClick', false)
      },
      _checkboxMethod() {
        this.checkedOrgList = this.$refs.tree.getCheckedNodes()
        this.$emit('check', this.checkedOrgList)
      },
      /**
       * 通过nodeKeyList主动勾选
       * @public
       * @param {Array} nodeKeyList 需要勾选的树节点的唯一nodeKey 需要通过参数`props.nodeKey`指定nodeKey的字段
       * @example this.ref.el.setCheckedByNodeKeys([]) // 清空所有选中的角色
       *          this.ref.el.setCheckedByNodeKeys(['123']) // 选中nodeKey值为123的角色
       */
      setCheckedByNodeKeys(nodeKeyList) {
        this.$refs.tree.setCheckedKeys(nodeKeyList)
      },
      /**
       * 获取被选中的节点信息
       * @returns {Array}
       */
      getCheckedNode() {
        return this.checkedOrgList
      }
    }
  }
</script>

<style scoped lang="scss">
  .organization-selector {

    ::v-deep .el-dialog {
      display: flex;
      height: 668px;
      flex-direction: column;

      .el-dialog__body {
        overflow: auto;
        flex: 1;
      }
    }
  }
</style>
